UI-Design auf dem nächsten Level: Die CSS Custom Highlight API für das Styling von Textmarkierungen meistern

In diesem Beispiel haben wir einen benutzerdefinierten Highlight-Namen namens code-highlight definiert. Anschließend haben wir dieses Highlight auf code-Elemente angewendet. Die Hintergrundfarbe ist auf Hellblau (#ADD8E6) gesetzt, die Textfarbe auf Dunkelblau (#00008B) und die Schriftstärke auf fett. Wenn nun Text innerhalb eines code-Elements ausgewählt wird, wird er mit diesen benutzerdefinierten Stilen versehen.

Erweiterte Verwendung: Gezieltes Ansprechen spezifischer Textbereiche

Die CSS Custom Highlight API kann auch verwendet werden, um spezifische Textbereiche innerhalb eines Elements gezielt anzusprechen. Dies ermöglicht eine noch granularere Kontrolle über das Styling von Textauswahlen.

Beispiel: Hervorheben von Suchbegriffen

Stellen Sie sich vor, Sie möchten Suchbegriffe in einem Dokument hervorheben. Dies erfordert oft JavaScript in Verbindung mit der CSS Highlight API.

1. Verwenden Sie JavaScript zur Identifizierung von Suchbegriffen: Nutzen Sie JavaScript, um alle Vorkommen des Suchbegriffs im Dokument zu finden.
2. Erstellen Sie Highlight-Bereiche: Verwenden Sie die Range-API in JavaScript, um für jedes Vorkommen des Suchbegriffs Bereiche zu erstellen.
3. Wenden Sie das Highlight an: Verwenden Sie die CSS.highlights.set()-Methode, um das Highlight auf die erstellten Bereiche anzuwenden.

            
// JavaScript-Code zum Hervorheben von Suchbegriffen
function highlightSearchTerms(searchTerm) {
  // Definieren Sie zuerst das benutzerdefinierte Highlight in CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Alle Textknoten finden
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Wenden Sie die Highlights mit CSS.highlights.set() an
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('Die CSS Custom Highlight API wird in diesem Browser nicht vollständig unterstützt. Fallback wird bereitgestellt');
    // Bieten Sie einen Fallback für Browser mit eingeschränkter Unterstützung (z.B. älteres Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Helles Lachsrot
      span.style.color = '#000000'; // Schwarz
      span.className = 'search-highlight-fallback'; // Fügen Sie eine Klasse für das Fallback-Styling hinzu
      range.surroundContents(span);
    });
  }
}

// CSS-Code zum Stylen des Such-Highlights
::highlight(search-highlight) {
  background-color: #FFA07A; /* Helles Lachsrot */
  color: #000000; /* Schwarz */
}

/* Fallback-Styling für Browser, die die API nicht vollständig unterstützen */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Anwendungsbeispiel: Heben Sie den Begriff "Beispiel" hervor
highlightSearchTerms("Beispiel");

            

              
                Copy
              
            
          

Dieses Code-Schnipsel zeigt, wie man Suchbegriffe in einem Dokument mit JavaScript und der CSS Custom Highlight API hervorhebt. Der JavaScript-Code identifiziert die Suchbegriffe, erstellt Bereiche für jedes Vorkommen und wendet das search-highlight auf diese Bereiche an. Der CSS-Code stylt dann den hervorgehobenen Text mit einem hellen lachsroten Hintergrund und schwarzem Text.

Wichtiger Hinweis: Dieser Ansatz erfordert JavaScript und stützt sich auf die CSS.highlights-API. Da die Unterstützung nicht universell ist, wird ein Fallback-Mechanismus (wie das Umschließen des Textes mit einem span und das Stylen dieses span) demonstriert.

Überlegungen zur Barrierefreiheit

Bei der Verwendung der CSS Custom Highlight API ist es entscheidend, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihre Website für alle, einschließlich Benutzer mit Behinderungen, nutzbar ist.

Tipps für barrierefreies Styling von Textauswahlen:

• Sorgen Sie für ausreichenden Kontrast: Achten Sie auf einen ausreichenden Kontrast zwischen der Hintergrund- und Textfarbe des markierten Textes, um ihn für Benutzer mit Sehbehinderungen lesbar zu machen. Die WCAG-Richtlinien empfehlen ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text.
• Verlassen Sie sich nicht nur auf Farbe: Verlassen Sie sich nicht ausschließlich auf Farbe, um eine Textauswahl anzuzeigen. Verwenden Sie zusätzliche visuelle Hinweise wie Unterstreichungen oder Fettdruck, um die Auswahl deutlicher zu machen.
• Bieten Sie alternatives Styling für den Hochkontrastmodus: Benutzer, die den Hochkontrastmodus in ihrem Betriebssystem aktivieren, können Ihre benutzerdefinierten Stile überschreiben. Bieten Sie ein alternatives Styling, das im Hochkontrastmodus gut funktioniert, um die Lesbarkeit zu gewährleisten. Sie können Media-Queries wie @media (forced-colors: active) verwenden, um zu erkennen, wann der Hochkontrastmodus aktiviert ist.
• Testen Sie mit assistiven Technologien: Testen Sie Ihre Website mit assistiven Technologien wie Screenreadern, um sicherzustellen, dass der markierte Text korrekt angesagt und verstanden wird.

Beispiel: Sicherstellung eines ausreichenden Kontrasts

            
::highlight {
  background-color: #000080; /* Marineblau */
  color: #FFFFFF; /* Weiß */
}

            

              
                Copy
              
            
          

In diesem Beispiel haben wir eine marineblaue Hintergrundfarbe und eine weiße Textfarbe gewählt, was einen ausreichenden Kontrast für Benutzer mit Sehbehinderungen bietet. Verwenden Sie immer einen Farbkontrastprüfer, um zu überprüfen, ob Ihre Farbauswahl den Barrierefreiheitsstandards entspricht. Werkzeuge wie der WebAIM Contrast Checker können dabei hilfreich sein.

Praktische Beispiele und Anwendungsfälle

Die CSS Custom Highlight API bietet eine Vielzahl von Möglichkeiten zur Verbesserung der Benutzererfahrung. Hier sind einige praktische Beispiele und Anwendungsfälle:

• Code-Hervorhebung: Wie bereits gezeigt, können Sie die API verwenden, um Code-Schnipsel mit benutzerdefinierten Stilen hervorzuheben, wodurch sie visuell ansprechender und leichter lesbar werden.
• Hervorhebung von Suchbegriffen: Heben Sie Suchbegriffe in einem Dokument hervor, um Benutzern zu helfen, die gesuchten Informationen schnell zu finden.
• Fehlerhervorhebung: Heben Sie Fehler oder Warnungen in Formularen oder anderen Benutzeroberflächen hervor, um die Aufmerksamkeit des Benutzers darauf zu lenken.
• Zitathervorhebung: Heben Sie zitierten Text in wissenschaftlichen Arbeiten oder Artikeln hervor, um ihn visuell vom Hauptinhalt zu unterscheiden.
• Hervorhebung in Konversationen: Heben Sie in Chat-Anwendungen die eigenen Nachrichten des Benutzers oder Nachrichten von bestimmten Benutzern hervor, um sie leichter verfolgen zu können.
• Gamification: Heben Sie bestimmte Wörter oder Sätze in einem Spiel hervor, um dem Spieler Hinweise oder Tipps zu geben.
• Textzusammenfassung: Heben Sie Schlüsselsätze oder -phrasen in einem Dokument hervor, um eine schnelle Zusammenfassung des Inhalts zu geben. Dies erfordert oft komplexe Algorithmen zur Bestimmung der Wichtigkeit.

Best Practices und Tipps

Um das Beste aus der CSS Custom Highlight API herauszuholen, befolgen Sie diese Best Practices und Tipps:

• Verwenden Sie beschreibende Highlight-Namen: Wählen Sie beschreibende Highlight-Namen, die den Zweck des Highlights klar angeben. Dies macht Ihren Code lesbarer und wartbarer. Verwenden Sie zum Beispiel code-highlight anstelle von highlight-1.
• Halten Sie Stile konsistent: Behalten Sie einen konsistenten Stil für alle Ihre Highlights bei, um eine einheitliche Benutzererfahrung zu schaffen. Verwenden Sie ein Designsystem oder einen Styleguide, um die Konsistenz zu gewährleisten.
• Vermeiden Sie die übermäßige Verwendung von Highlights: Verwenden Sie Highlights nicht übermäßig, da dies für Benutzer ablenkend und überfordernd sein kann. Setzen Sie sie sparsam und strategisch ein, um die Aufmerksamkeit auf die wichtigsten Informationen zu lenken.
• Testen Sie auf verschiedenen Geräten und Browsern: Testen Sie Ihre Website auf verschiedenen Geräten und Browsern, um sicherzustellen, dass Ihre benutzerdefinierten Highlights korrekt angezeigt werden. Achten Sie besonders auf mobile Geräte und ältere Browser.
• Berücksichtigen Sie die Leistung: Obwohl die CSS Custom Highlight API im Allgemeinen performant ist, achten Sie auf die Anzahl der Highlights, die Sie verwenden, insbesondere bei großen Dokumenten. Zu viele Highlights können die Leistung beeinträchtigen. Wenn Sie JavaScript zur Verwaltung von Highlights verwenden, optimieren Sie Ihren Code, um die Anzahl der DOM-Manipulationen zu minimieren.
• Nutzen Sie Progressive Enhancement: Da die Browserunterstützung nicht universell ist, verwenden Sie Techniken des Progressive Enhancement. Implementieren Sie einen Fallback-Mechanismus mit Standard-CSS-Styling, um sicherzustellen, dass die Erfahrung für Benutzer älterer Browser nutzbar bleibt. Erwägen Sie die Verwendung von Feature-Erkennung (z.B. die Prüfung auf die Existenz von CSS.highlights), um zu entscheiden, ob die API oder der Fallback verwendet werden soll.

Fazit

Die CSS Custom Highlight API ist ein leistungsstarkes Werkzeug zur Verbesserung der Benutzererfahrung und zur Schaffung visuell ansprechenderer und informativerer Textauswahlen. Indem Sie diese API meistern, können Sie Ihr UI-Design auf die nächste Stufe heben und den Benutzern ein ansprechenderes und barrierefreieres Surferlebnis bieten. Obwohl die Browserunterstützung sich noch entwickelt, wird Ihnen das Verständnis und Experimentieren mit dieser API jetzt dabei helfen, zukunftsweisende Weberlebnisse zu schaffen, sobald die Akzeptanz wächst. Denken Sie daran, der Barrierefreiheit Priorität einzuräumen und Fallbacks für ältere Browser bereitzustellen, um eine positive Erfahrung für alle Benutzer zu gewährleisten.

Ressourcen

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Contrast Checker